<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				height: 2000px;
			}
			
			li {
				list-style: none;
			}
			
			a {
				text-decoration: none;
				color: white;
			}
			
			.firstnav li {
				float: left;
				background: red;
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			
			.firstnav li a {
				display: block
			}
			
			.secnav {
				display: none;
			}
			
			.firstli:hover {
				background: pink;
			}
			
			.firstli:hover .secnav {
				display: block;
			}
			
			.secli {
				position: relative;
			}
			
			.thirdnav {
				position: absolute;
				left: 101px;
				top: 0;
				display: none;
			}
			
			.secli:hover {
				background: pink;
			}
			
			.secli:hover .thirdnav {
				display: block;
			}
			
			.thirdli:hover {
				background: pink;
			}
			
			.firstli {
				border: 1px solid white;
				border-right: none;
			}
			
			.secli {
				border-bottom: 1px solid white;
			}
			
			.thirdli {
				border-bottom: 1px solid white;
			}
		</style>
	</head>

	<body>
		<div class="nav">
			<ul class="firstnav">
				<li class="firstli">
					<a href="">首页</a>
					<ul class="secnav">
						<li class="secli">
							<a href="">首页</a>
							<ul class="thirdnav">
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
							</ul>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
					</ul>

				</li>

				<li class="firstli">
					<a href="">首页</a>
					<ul class="secnav">
						<li class="secli">
							<a href="">首页</a>
							<ul class="thirdnav">
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
							</ul>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li class="secli">
						<li>
							<a href="">首页</a>
						</li>
					</ul>
				</li>

				<li class="firstli">
					<a href="">首页</a>
					<ul class="secnav">
						<li class="secli">
							<a href="">首页</a>
							<ul class="thirdnav">
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
							</ul>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
					</ul>
				</li>

				<li class="firstli">
					<a href="">首页</a>
					<ul class="secnav">
						<li class="secli">
							<a href="">首页</a>
							<ul class="thirdnav">
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
							</ul>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
					</ul>
				</li>

				<li class="firstli">
					<a href="">首页</a>
					<ul class="secnav">
						<li class="secli">
							<a href="">首页</a>
							<ul class="thirdnav">
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
							</ul>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
					</ul>
				</li>

				<li class="firstli">
					<a href="">首页</a>
					<ul class="secnav">
						<li class="secli">
							<a href="">首页</a>
							<ul class="thirdnav">
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
								<li class="thirdli">
									<a href="">首页</a>
								</li>
							</ul>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
						<li class="secli">
							<a href="">首页</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

</html>